<template>
	<div class="login-register">
		<div class="contain">
			<div class="big-box" :class="{active:isLogin}">
				<div class="big-contain" key="bigContainLogin" v-if="isLogin">
					<div class="btitle" >用户登录</div>
          <el-form :model="loginForm" label-width="auto" class="login" ref="loginFormRef">
            <el-form-item label="账号">
              <el-input v-model.number="loginForm.number" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="loginForm.password" @keyup.enter="login()" style="width: 60%;"/>
            </el-form-item>
            <el-form-item label="身份">
              <el-radio-group v-model="loginForm.type">
                <el-radio :value=0>我是学生</el-radio>
                <el-radio :value=1>我是老师</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="onSubmit">Create</el-button> -->
              <el-button type="primary" @click="login()" style="margin-left: 24%;">登录</el-button>
            </el-form-item>
          </el-form>
				</div>

				<div class="big-contain" key="bigContainRegister" v-else>
					<div class="retitle">注册</div>
          <el-form :model="registForm" label-width="auto" class="regist">
            <el-form-item label="账号">
              <el-input v-model.number="registForm.number" style="width: 45%;"/>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="registForm.name" style="width: 45%;"/>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="registForm.phone" style="width: 45%;"/>
            </el-form-item>
            <el-form-item label="身份">
              <el-radio-group v-model="registForm.type">
                <el-radio :value=0>我是学生</el-radio>
                <el-radio :value=1>我是老师</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="registForm.password" style="width: 45%;"/>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="registForm.passwordagain" style="width: 45%;"/>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="onSubmit">Create</el-button> -->
              <el-button type="primary" @click="regist()" style="margin-left: 24%;">注册</el-button>
            </el-form-item>
          </el-form>
				</div>
			</div>
			<div class="small-box" :class="{active:isLogin}">
				<div class="small-contain" key="smallContainRegister" v-if="isLogin">
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">请登录你的账户</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<div class="small-contain" key="smallContainLogin" v-else>
					<div class="stitle">你好,欢迎使用学途通!</div>
					<p class="scontent">开始注册</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

  
  <script lang="ts" setup>  
  import { reactive, ref } from 'vue'  
  import type { FormInstance, FormRules } from 'element-plus'
  import { loginAPI,registAPI } from '../../api/login';
	import {useTokenStore} from '../../utils/token.js'
	const tokenStore = useTokenStore()
  const isLogin = ref(true);
 //定义登录注册的数据模型  
const loginForm=reactive({
  number:'',
  password:'',
  type:0
})
const registForm=reactive({
  number:'',
  name:'',
  type:0,
  phone:'',
  password:'',
  passwordagain:''
})

const changeType = () => {
  isLogin.value = !isLogin.value;
  loginForm.number='';
  loginForm.password='';
  loginForm.type=0;
};
  //调用后台接口完成登录
  import { useRouter } from 'vue-router'
    import { ElMessage } from 'element-plus'
  const router = useRouter() 

  
  const login = async() => {  
    console.log("登录信息",loginForm)

    //秘密通道
    if(loginForm.number=='abc'||loginForm.password=='abc'){
      console.log('密码通道登录')
      if(loginForm.type==0){
        router.push('/st-home')
		
      }else{
        router.push('/te-home')
      }
    }else{
      //登录
			  const result=await loginAPI(loginForm)
        // ElMessage.success(result.data.msg ? result.data.msg : '登录成功')
        // const token=result.data.token
        tokenStore.setToken(result.data.data.token)
        if(loginForm.type==0){
          router.push('/st-home')
        }else{
          router.push('/te-home')
        }
        // ElMessage.success(result.data.msg ? result.data.msg : '登录成功')
    }
  } 
  const regist=async()=>{
    console.log("注册信息",registForm)
    const result=await registAPI(registForm)
    if(result.data.code==200){
      // router.push('/login')
      // location.reload();//刷新页面
      ElMessage.success('注册成功,请登录')
      isLogin.value = !isLogin.value;
    }
  } 
  
  </script>
  <style scoped>
	.login-register{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}
	.contain{
		width: 60%;
		height: 60%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 0 3px #f0f0f0,
					0 0 6px #f0f0f0;
	}
	.big-box{
		width: 60%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 40%;
		transform: translateX(0%);
		transition: all 1s;
	}
	.big-contain{
    height: 100%;
    width: 100%;
    /* background-color: aqua; */
    position: relative;
    /* display: flex; */
		/* width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; */
	}
	.btitle{
    height: 10%;
    width: 30%;
		font-size: 1.5em;
		font-weight: bold;
		color: #7babe9;
    /* background-color: #ee0000; */
    margin-left: 45%;
    /* top:50%; */
    padding-top: 15%;
    /* margin-top: 10%; */
    /* text-align: center; */
	}
  .login{
    height: 70%;
    width: 70%;
    /* background-color: yellow; */
    margin-left: 30%;
    margin-top: 7%;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
  }
  .regist{
    height: 80%;
    width: 100%;
    /* background-color: yellowgreen; */
    margin-left: 20%;
  }
  .retitle{
    height: 10%;
    width: 30%;
		font-size: 1.5em;
		font-weight: bold;
		color: #7babe9;
    /* background-color: #ee0000; */
    margin-left: 45%;
    /* top:50%; */
    padding-top: 15%;
  }
	.bform{
		width: 100%;
		height: 40%;
		padding: 2em 0;
		/* display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center; */
	}
	.bform .errTips{
		display: block;
		width: 50%;
		text-align: left;
		color: red;
		font-size: 0.7em;
		margin-left: 1em;
	}
	.bform input{
		width: 50%;
		height: 30px;
		border: none;
		outline: none;
		border-radius: 10px;
		padding-left: 2em;
		background-color: #f0f0f0;
	}
	.bbutton{
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		background-color: #7babe9;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}
	.small-box{
		width: 40%;
		height: 100%;
		background: linear-gradient(135deg,#7babe9,#7babe9c4);
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(0%);
		transition: all 1s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}
	.small-contain{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.stitle{
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
	}
	.scontent{
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 2em 4em;
		line-height: 1.7em;
	}
	.sbutton{
		width: 60%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: transparent;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}
	
	.big-box.active{
		left: 0;
		transition: all 0.5s;
	}
	.small-box.active{
		left: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: inherit;
		border-bottom-right-radius: inherit;
		transform: translateX(-100%);
		transition: all 1s;
	}
</style>